<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav-bar" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
			<view class="nav-back" @click="goBack">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<view class="nav-title">会员中心</view>
		</view>

		<!-- 会员等级展示 -->
		<view class="vip-cards">
			<view class="vip-card" :class="{active: currentLevel === 0}">
				<view class="vip-header">
					<uni-icons type="star" size="28" color="#999"></uni-icons>
					<text class="vip-name">普通用户</text>
				</view>
				<view class="vip-desc">注册即可享受基础权益</view>
			</view>

			<view class="vip-card gold" :class="{active: currentLevel === 1}">
				<view class="vip-header">
					<uni-icons type="star-filled" size="28" color="#FFD700"></uni-icons>
					<text class="vip-name">黄金会员</text>
				</view>
				<button class="upgrade-btn" v-if="currentLevel < 1" @click="handleUpgrade">立即升级</button>
				<view class="vip-desc" v-else>当前等级</view>
			</view>

			<view class="vip-card super" :class="{active: currentLevel === 2}">
				<view class="vip-header">
					<uni-icons type="medal" size="28" color="#FF4500"></uni-icons>
					<text class="vip-name">超级会员</text>
				</view>
				<button class="upgrade-btn" v-if="currentLevel < 2" @click="handleUpgrade">立即升级</button>
				<view class="vip-desc" v-else>尊享特权</view>
			</view>
		</view>

		<!-- 会员权益 -->
		<view class="privilege-section">
			<view class="section-title">
				<uni-icons type="gift" size="24" color="#FF6347"></uni-icons>
				<text>会员专属权益</text>
			</view>

			<!-- 黄金会员权益 -->
			<view class="privilege-list gold">
				<view class="privilege-item" v-for="(item,index) in goldPrivileges" :key="index">
					<uni-icons :type="item.icon" size="20" color="#FFD700"></uni-icons>
					<text>{{item.text}}</text>
				</view>
			</view>

			<!-- 超级会员权益 -->
			<view class="privilege-list super">
				<view class="privilege-item" v-for="(item,index) in superPrivileges" :key="index">
					<uni-icons :type="item.icon" size="20" color="#FF4500"></uni-icons>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>

		<!-- 温馨提示 -->
		<view class="notice-section">
			<uni-icons type="info" size="20" color="#FFA500"></uni-icons>
			<text>温馨提示：黄金会员和超级会员非终生制，自然年度消费次数少于2次或交易金额少于200元，下一年将降低会员等级</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentLevel: 1, // 当前等级 0-普通 1-黄金 2-超级
				goldPrivileges: [
					{
						icon: 'shop',
						text: '周日全场原价商品85折'
					},
					{
						icon: 'cart',
						text: '购物积分双倍累积'
					},
					{
						icon: 'gift',
						text: '生日权益好礼赠送'
					},
					{
						icon: 'notification',
						text: '签到送优惠券'
					}
				],
				superPrivileges: [
					{
						icon: 'shop',
						text: '全场原价商品85折'
					},
					{
						icon: 'cart',
						text: '购物积分三倍累积'
					},
					{
						icon: 'medal',
						text: '20000积分兑换现金'
					},
					{
						icon: 'gift',
						text: '专属生日豪华礼包'
					}
				],
				safeAreaInsets: {
					top: 0,
					bottom: 0
				}
			};
		},
		onLoad() {
			this.getSafeAreaInsets();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			handleUpgrade() {
				uni.showModal({
					title: '升级会员',
					content: '确认升级会员享受更多权益？',
					success: (res) => {
						if (res.confirm) {
							// 实际应调用升级接口
							uni.showToast({
								title: '升级申请已提交'
							});
						}
					}
				});
			},
			getSafeAreaInsets() {
				uni.getSystemInfo({
					success: (res) => {
						this.safeAreaInsets = {
							top: res.safeArea ? res.safeArea.top : res.statusBarHeight,
							bottom: res.safeArea ? res.safeArea.bottom : 0
						};
					},
					fail: (err) => {
						console.error('获取系统信息失败:', err);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	/* 自定义导航栏 */
	.custom-nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between; // 确保内容在水平方向上分布
		padding: 0 20rpx;
		height: 90rpx; // 设置固定高度
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: sticky;
		top: 0;
		z-index: 10;

		.nav-back {
			display: flex;
			align-items: center;
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			flex: 1;
			text-align: center;
		}
	}

	.vip-cards {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;

		.vip-card {
			background: #fff;
			border-radius: 20rpx;
			padding: 40rpx;
			position: relative;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

			&.active {
				border: 2rpx solid #FFD700;
			}

			&.gold {
				background: linear-gradient(45deg, #FFF3E0, #FFECB3);
			}

			&.super {
				background: linear-gradient(45deg, #FFEBEE, #FFCDD2);
			}

			.vip-header {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.vip-name {
					font-size: 40rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}
			}

			.vip-desc {
				color: #666;
				font-size: 28rpx;
			}

			.upgrade-btn {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				background: #FFA500;
				color: #fff;
				font-size: 28rpx;
				padding: 12rpx 30rpx;
				border-radius: 40rpx;
			}
		}
	}

	.privilege-section {
		background: #fff;
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;

		.section-title {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #333;
			margin-bottom: 30rpx;

			text {
				margin-left: 15rpx;
			}
		}

		.privilege-list {
			padding: 20rpx 0;

			&.gold {
				border-left: 8rpx solid #FFD700;
			}

			&.super {
				border-left: 8rpx solid #FF4500;
				margin-top: 40rpx;
			}

			.privilege-item {
				display: flex;
				align-items: center;
				padding: 25rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid #eee;

				uni-icons {
					margin-right: 20rpx;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	.notice-section {
		background: #FFF9E6;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: flex-start;
		color: #666;
		font-size: 26rpx;
		line-height: 1.6;

		uni-icons {
			flex-shrink: 0;
			margin-right: 15rpx;
		}
	}
</style>